<template>
    <div>

        <Card>
            <p slot="title">
                <Icon type="ios-film-outline"></Icon>
                TCP监控：当前连接数 {{tcpServiceData.TotalConnections}}/{{tcpServiceData.MaxConnectionNumber}}
                &nbsp;&nbsp; 正在运行：{{tcpServiceData.IsRunning}} &nbsp;&nbsp;
            </p>
            <Row :gutter="8">
                <Col span="6">
                    <show-label label="服务名称" :text="tcpServiceData.ServiceName"></show-label>
                </Col>
                <Col span="6">
                    <show-label label="监控时间" :text="createTime" :textSpan="12"></show-label>
                </Col>
                <Col span="6">
                    <show-label label="开启时间" :text="startedTime" :textSpan="12"></show-label>
                </Col>
                <Col span="6">
                    <show-label label="传输速度" :text="tcpServiceData.RequestHandlingSpeed"></show-label>
                </Col>
            </Row>
            <Row :gutter="8">
                <Col span="6">
                    <show-label label="累计请求次数" :text="tcpServiceData.TotalHandledRequests"></show-label>
                </Col>
                <Col span="6">
                    <show-label label="可用队列数" :text="tcpServiceData.AvialableSendingQueueItems"></show-label>
                </Col>
                <Col span="6">
                    <show-label label="队列总数" :text="tcpServiceData.TotalSendingQueueItems" :textSpan="12"></show-label>
                </Col>
            </Row>
        </Card>

        <Card>
            <p slot="title">
                <Icon type="ios-film-outline"></Icon>
                今日新增：{{todayAddCount}}
            </p>
            <Row :gutter="16">
                <i-col span="6" v-for="(infor, i) in inforTodayCountCardData" :key="`infor-${i}`"
                       style="height: 120px;">
                    <info-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
                        <count-to :end="infor.count" count-class="count-style"/>
                        <p>{{ infor.title }}</p>
                    </info-card>
                </i-col>
            </Row>
        </Card>

        <Card>
            <p slot="title">
                <Icon type="ios-film-outline"></Icon>
                日志总量：{{totalCount}}
            </p>
            <Row :gutter="16">
                <i-col span="6" v-for="(infor, i) in inforTotalCountCardData" :key="`infor-${i}`"
                       style="height: 120px;">
                    <info-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
                        <count-to :end="infor.count" count-class="count-style"/>
                        <p>{{ infor.title }}</p>
                    </info-card>
                </i-col>
            </Row>
        </Card>

    </div>
</template>

<script>

    import InfoCard from '_c/info-card';
    import CountTo from '_c/count-to';
    import ShowLabel from '_c/show-label';
    import {formatDate} from '@/libs/tools';
    import {QueryTodayCountReport, QueryTotalCountReport} from '@/api/report';
    import DatetimeInterval from '@/components/datetime-interval/datetime-interval';

    export default {
        name: 'ConsoleMain',
        components: {
            DatetimeInterval,
            InfoCard,
            CountTo,
            ShowLabel
        },
        data() {
            return {
                inforTodayCountCardData: [],
                inforTotalCountCardData: [],
                todayAddCount: 0,
                totalCount: 0,
            };
        },
        methods: {
            queryTodayCountReport() {
                QueryTodayCountReport().then(res => {
                    this.todayAddCount = res.Data.TodayCount;
                    this.inforTodayCountCardData.push(
                        {title: 'Error日志', icon: 'md-close-circle', count: res.Data.TodayErrorCount, color: '#ed3f14'},
                        {title: 'Warn日志', icon: 'md-warning', count: res.Data.TodayWarnCount, color: '#ff9900'},
                        {
                            title: 'Debug日志',
                            icon: 'md-arrow-dropright-circle',
                            count: res.Data.TodayDebugCount,
                            color: '#9A66E4'
                        },
                        {
                            title: 'Info日志',
                            icon: 'ios-information-circle-outline',
                            count: res.Data.TodayInfoCount,
                            color: '#19be6b'
                        },
                    );
                });
            },
            queryTotalCountReport() {
                QueryTotalCountReport().then(res => {
                    this.totalCount = res.Data.TotalCount;
                    this.inforTotalCountCardData.push(
                        {title: 'Error日志', icon: 'md-close-circle', count: res.Data.ErrorCount, color: '#ed3f14'},
                        {title: 'Warn日志', icon: 'md-warning', count: res.Data.WarnCount, color: '#ff9900'},
                        {
                            title: 'Debug日志',
                            icon: 'md-arrow-dropright-circle',
                            count: res.Data.DebugCount,
                            color: '#9A66E4'
                        },
                        {
                            title: 'Info日志',
                            icon: 'ios-information-circle-outline',
                            count: res.Data.InfoCount,
                            color: '#19be6b'
                        },
                    );
                });
            },
        },
        computed: {
            tcpServiceData() {
                return this.$store.state.app.tcpServiceData;
            },
            createTime() {
                var data = this.$store.state.app.tcpServiceData;
                if (data && data.CreatTime) {
                    return formatDate(data.CreatTime,'yyyy-MM-dd hh:mm:ss');
                }
                return '';
            },
            startedTime() {
                var data = this.$store.state.app.tcpServiceData;
                if (data && data.StartedTime) {
                    return formatDate(data.StartedTime,'yyyy-MM-dd hh:mm:ss');
                }
                return '';
            }
        },
        mounted() {
            this.inforTodayCountCardData.length = 0;
            this.inforTotalCountCardData.length = 0;
            this.queryTodayCountReport();
            this.queryTotalCountReport();
        }
    };
</script>

<style lang="less">
    .count-style {
        font-size: 50px;
    }
</style>
